<script>
// 我的设备

import axios from "axios";
// jwt_decode是一个解析JWT的工具，可以将加密的token解析，然后拿到用户的信息。使用方法是先安装，然后引入使用并解析token。
// 在vue中，可以将解析完的token放到vuex中。在Java中，可以使用JWT.decode方法来解析token。
import jwt_decode from "jwt-decode";
// import PortSet from "@/components/SerialPortSettingsTable.vue"

export default {
  name: 'SearchingDeviceContent',
  // components: {PortSet},
  computed: {
    filteredDevices() {  //// 计算属性，过滤设备列表
      if (!this.searchQuery) {
        return this.devices;
      }
      return this.devices.filter(device => {  // 否则，过滤设备
        // const str1 = device.deviceName;
        // const str2 = device.note;
        return this.fuzzyMatch(this.searchQuery, device.deviceName) || this.fuzzyMatch(this.searchQuery, device.note);// 根据设备名称模糊匹配   // 或者根据设备备注模糊匹配
      })
    }
  },

  created() {
     // 设置一个回调函数来处理设备的 ping 响应。
// 发送一个 POST 请求获取用户的设备列表，并将其存储在 devices 数组中。
//检查设备是否在线
    window.electronAPI.pingDeviceCallback((event, data) => {  // 设置设备 ping 回调
      const rp = data.split('-'); // 用 '-' 分割数据
      if (rp) {
        const ip = rp[0];  // 获取 IP 地址 
        const code = rp[1];  // 获取代码
        this.setActivate(ip, code);   // 激活设备
      }
    })
    // const command = `D:\\Project\\config-kits\\resources\\n2n\\edge.exe -c ${localStorage.getItem('room')} -l 118.31.36.254:8024`;
    //   // 运行 n2n 客户端
    // window.electronAPI.runN2N(localStorage.getItem('room'));  // // 传入房间信息

     //open  12.5fm
     window.electronAPI.runOpenVPN(localStorage.getItem('room'));


    axios.post(`${this.$serverUrl}/api/device/getMyDevice`, {
      'tenantId': this.tenantId  // 请求体中包含租户 ID
    }, {
      headers: {
        'X-Authorization': `Bearer ${this.token}`  // 设置请求头，包含 JWT 令牌
      }
    }).then(response => {
      if (response.status === 200) {
        for (const index in response.data) {
          this.devices.push({    // 将每个设备添加到 devices 数组
            ...response.data[index],  // 扩展响应的数据
            status: 0, // 设置初始状态为 0
            switchOn: 0 // 设置开关状态为 0
          });
          window.electronAPI.pingDevice(response.data[index].ip)  // ping 设备
          
          // 使用物理IP进行ping操作(12.6 fm)
          // window.electronAPI.pingDevice(response.data[index].physicalIp)  // // 假设物理IP字段为physicalIp


        }
      }
    }).catch(error => {
      console.log(error)
    })
  },
  mounted() {
    // window.electronAPI.onRunN2NSuccess((event, data) => {
    //   console.log(data)
    // });

    //测试openVPN是否成功12.5 fm
    window.electronAPI.onRunOpenVPNSuccess((event, data) => {     // 设置 openVPN连接成功的回调
      console.log("openVPN 连接成功" + data);
    });
    window.electronAPI. onRunOpenVPNFailed((event, data) => {
      if (data === 'No Windows tap devices found, did you run tapinstall.exe?') {
        // console.log("try to close n2n")
        window.electronAPI. closeOpenVPN();  // 关闭 n2n 客户端
      }
      // console.log(data)
    });

    
    // window.electronAPI.onRunN2NSuccess((event, data) => {     // 设置 n2n 连接成功的回调
    //   console.log("n2n 连接成功" + data);
    // });
    // window.electronAPI.onRunN2NFailed((event, data) => {
    //   if (data === 'No Windows tap devices found, did you run tapinstall.exe?') {
    //     // console.log("try to close n2n")
    //     window.electronAPI.closeN2N();  // 关闭 n2n 客户端
    //   }
    //   // console.log(data)
    // });


    window.electronAPI.getIp((event, ip) => {
      const index = this.devices.findIndex(dev => dev.ip === ip);
      console.log(`index:${index}`)
      this.devices[index].switchOn = 1; // 设置设备的开关状态为 1
      this.hasSwitchOn = index; // 更新当前连接的设备索引
      setTimeout(() => {
        const data = {
          "cmd": 246   // 设置要发送的命令
        }
        window.electronAPI.sendSettings(JSON.stringify(data));   // 发送设置
      }, 50);
    });
  },
  beforeDestroy() { // 组件销毁前调用
    window.electronAPI.removeRunN2NStoppedListener(() => { // 移除 n2n 运行失败的监听
      console.log('运行失败监听器移除成功'); // 输出信息
    });
    window.electronAPI.removeRunN2NSuccessListener(() => { // 移除 n2n 运行成功的监听
      console.log('运行成功监听器移除成功'); // 输出信息
    });
    window.electronAPI.removeGetIpListener(); // 移除获取 IP 的监听
  },
  data() { // 组件的数据
    const token = localStorage.getItem('token'); // 从 localStorage 获取 token
    const tenantId = jwt_decode(token).tenantId; // 解析 token 获取租户 ID
    return { // 返回数据对象
      devices: [], // 初始化设备数组
      dialog: false, // 控制删除对话框的显示
      setSerialPortDialog: false, // 控制串口设置对话框的显示
      deleteId: '', // 存储待删除设备的 ID
      token, // 保存 token
      tenantId, // 保存租户 ID
      selectedIp: '', // 存储当前选中的设备 IP
      editingIndex: '', // 当前编辑设备的索引
      confirmText: '', // 存储确认文本
      hasSwitchOn: -1, // 当前连接的设备索引
      searchQuery: '', // 用户输入的搜索查询
    };
  },
  methods: {
    sure() {
      if (this.confirmText !== '我已知晓并确认解绑该设备') {
        this.$emit('errMsg', '请输入确认文本！')
        return;
      }
      if (this.deleteId) { // 如果有待删除设备 ID
        this.del(this.deleteId); // 调用删除方法
        this.dialog = false; // 关闭对话框
        this.deleteId = null; // 清空待删除 ID
      }
    },
    del(id) {
      axios.delete(`${this.$serverUrl}/api/device/delete/${id}`, {
        headers: {
          'X-Authorization': `Bearer ${this.token}`    // 设置请求头，包含 JWT 令牌
        }
      }).then(response => {
        if (response.data === 'success') {
          this.refresh()
        } else if (response.data === 'fail') location.reload();
        else console.log(response)
      }).catch(error => {
        console.log(error)
      })
    },
    refresh() { // 刷新设备列表
      localStorage.setItem('curItem', '我的设备'); // 更新当前项
      this.$emit('refresh'); // 触发刷新事件
    },
    clickDelete(sn) { // 显示删除对话框
      this.deleteId = sn; // 记录待删除设备的 SN
      this.dialog = true; // 打开对话框
    },

    //点击按钮的时候，会调用这个方法
    connect() {
      // if (!this.selectedIp) {
      //   this.$emit('errMsg', "请先选择网关设备");
      //   return;
      // }
      //检查是否在线，并且实现唯一性
      const index = this.devices.findIndex(dev => dev.ip === this.selectedIp);
      
      // 物理的Ip12.6fm
      // const index = this.devices.findIndex(dev => dev.physicalIp === this.selectedIp);
      const device = this.devices[index];
      if (device.status !== 1) {
        this.$emit('errMsg', "设备不在线");
        return;
      }
      this.hasSwitchOn = index; // 更新当前连接的设备索引


      //开启串口映射
      window.electronAPI.connRemote(device.ip); // 连接设备（通过IP来检查设备是否在线)


      window.electronAPI.requestSend();


      //后面根据openVPN进行修改12.5
      // window.electronAPI.connRemote(device.physicalIp); // 连接设备（通过物理IP来检查设备是否在线)


      localStorage.setItem('devName', device.deviceName); // 保存设备名称
      console.log(device.deviceName); // 输出设备名称
      setTimeout(() => {
        this.$emit('showConn', device.ip);  // 触发连接事件
        // this.$emit('showConn', device.physicalIp);  // 触发连接事件(物理Ip  12.6 fm )
        

      }, 50);
    },
    selectDev(index) {
      this.selectedIp = this.devices[index].ip;
      this.connect();
    },
    // edit(index) {
    //   this.editingIndex = index;
    //   this.portInfo = this.devices[index].portInfo;
    //   this.setSerialPortDialog = true;
    // },
    // save() {
    //   this.$refs.settingTable.returnData();
    // },
    // handleData(data) {
    //   this.devices[this.editingIndex].portInfo = data;
    //   this.setSerialPortDialog = false;
    //   this.editingIndex = '';
    //   this.portInfo = [];
    // },
    // cancelEdit() {
    //   this.setSerialPortDialog = false;
    //   this.$refs.settingTable.clearData();
    //   this.portInfo = [];
    // },
    // setSnackBarFalse(text) {
    //   this.$emit('errMsg', text);
    // },
    setActivate(ip, code) { // 激活设备
      const device = this.devices.find(dev => dev.ip === ip); // 查找设备
      //物理的IP（12.6 fm)
      // const device = this.devices.find(dev => dev.physicalIp === ip); // 查找设备


      if (device) { // 如果设备存在
        if (code === '0') { // 如果代码为 0
          device.status = 1; // 设置设备状态为在线
          this.devices.sort((a, b) => { // 对设备进行排序
            if (a.status === 1 && b.status !== 1) { // 如果 a 在线，b 不在线
              return -1; // a 排在前面
            }
            if (b.status === 1 && a.status !== 1) { // 如果 b 在线，a 不在线
              return 1; // b 排在前面
            }
            return 0; // 保持原有顺序
          });
        } else {
          device.status = 2; // 否则设置设备状态为离线
        }
      }
    },
    handleSwitchChange(index) {
      // 如果设备状态不等于1，不允许打开开关
      if (this.devices[index].switchOn === true) {
        if (this.devices[index].status !== 1) {
          this.$emit('errMsg', "设备不在线");
          setTimeout(() => {
            this.devices[index].switchOn = 0;
          }, 20);
          return;
        }
        if (this.hasSwitchOn !== -1) {
          const confirmAction = confirm('您已有设备连接中，确定断开连接吗？');
          if (!confirmAction) {
            // 用户点击取消，不改变开关状态
            setTimeout(() => {
              this.devices[index].switchOn = 0;
            }, 20);
            return;
          }
          // 用户确认，关闭所有其他开关
          window.electronAPI.disconnectRemote();
          this.devices[this.hasSwitchOn].switchOn = 0;
          this.hasSwitchOn = index;
          return;
        }
        this.hasSwitchOn = index;
        // 调用 selectDev 方法
        this.selectDev(index);
      } else {
        if (index === this.hasSwitchOn) {
          window.electronAPI.disconnectRemote();
          this.hasSwitchOn = -1;
        }
      }
    },
    disconnectRemoteCallback() {
      console.log('原设备已成功断开连接');
      if (this.hasSwitchOn !== -1) this.selectDev(this.hasSwitchOn);
    },
    disconnectRemote() {
      window.electronAPI.disconnectRemote();
    },
    filterDevices() {
    },
    fuzzyMatch(pattern, string) {
      // const distance = this.levenshteinDistance(pattern, string);
      let isSubStr;
      if (pattern.length < string.length)
        isSubStr = this.levenshteinDistance(pattern, string);
      else isSubStr = this.levenshteinDistance(string, pattern);
      if (isSubStr) return true;
      else {
        if (string.length === 0) return false;
        const distance = this.editDistance(pattern, string);
        return distance < string.length && distance <= 2;
      }
    },
    levenshteinDistance(s1, s2) {
      if (s1.length === 0) return false;
      let pointer1 = 0; // 指向 s1
      let pointer2 = 0; // 指向 s2
      // 遍历 s2
      while (pointer2 < s2.length) {
        // 如果字符匹配，移动 s1 的指针
        if (pointer1 < s1.length && s1[pointer1] === s2[pointer2]) {
          pointer1++;
        }
        // 移动 s2 的指针
        pointer2++;
      }
      // 如果 pointer1 达到 s1 的长度，说明 s1 是 s2 的子序列
      return pointer1 === s1.length;
    },
    editDistance(s1, s2) {
      const dp = Array(s1.length + 1).fill(null).map(() => Array(s2.length + 1).fill(0));
      for (let i = 0; i <= s1.length; i++) dp[i][0] = i;
      for (let i = 0; i <= s2.length; i++) dp[0][i] = i;
      for (let i = 1; i <= s1.length; i++) {
        for (let j = 1; j <= s2.length; j++) {
          if (s2[j-1] === s1[i-1]) dp[i][j] = dp[i-1][j-1];
          else {
            //  // 计算插入、删除、替换的最小操作数
            dp[i][j] = Math.min(dp[i-1][j]+1, dp[i][j-1]+1, dp[i-1][j-1]+1);
          }
        }
      }
      return dp[s1.length][s2.length];
    }
  }
};
</script>

<template>
  <div class="main">
    <!-- 我的设备 -->
    <div class="top">
      <!--      <v-container>-->
      <!--        <v-row align="center" justify="center">-->
      <!--          <v-col cols="12">-->
      <!--            <v-select-->
      <!--                v-model="selectedIp"-->
      <!--                :items="devices"-->
      <!--                item-text="deviceName"-->
      <!--                no-data-text="无"-->
      <!--                item-value="ip"-->
      <!--                class="custom-select"-->
      <!--                outlined-->
      <!--                :menu-props="{-->
      <!--                  offsetY: true,-->
      <!--                  maxHeight: '300'-->
      <!--                }">-->
      <!--              <template v-slot:append-outer>-->
      <!--                <v-btn v-if="selectedIp === '' || hasSwitchOn === -1" color="primary" small @click="connect" class="select-btn">-->
      <!--                  连接-->
      <!--                </v-btn>-->
      <!--                <v-btn v-else color="red" small @click="disconnectRemote()" class="select-btn">断开</v-btn>-->
      <!--              </template>-->
      <!--            </v-select>-->
      <!--          </v-col>-->
      <!--        </v-row>-->
      <!--      </v-container>-->
      <input
          type="text"
          placeholder="搜索设备..."
          class="rounded-input"
          v-model="searchQuery"
          @input="filterDevices"
      />
    </div>
    <div class="device-list">
      <v-container>
        <v-row v-if="filteredDevices.length === 0" justify="center" align="center">
          <v-col cols="12" class="text-center">
            当前账户下没有设备
          </v-col>
        </v-row>
        <!-- 循环每个设备数据 -->
        <v-row
            v-else
            v-for="(device, index) in filteredDevices"
            :key="index"
        >
          <v-col cols="12" class="item">
            <!-- item-top -->
            <v-row class="item-top">
              <!-- dev-left -->
              <v-col class="dev-left" cols="7">
                <div class="dev-name">{{ device.deviceName }}({{ device.ip }})</div>
                <div class="dev-ip">SN : {{ device.sn }}</div>
              </v-col>
              <!-- dev-right -->
              <v-col class="dev-right" cols="5" style="position: relative;">
                <div class="box">
                  <v-tooltip right>
                    <template v-slot:activator="{ on }">
                      <span v-on="on">
                        <v-switch
                            class="pt-0 mt-0"
                            :key="device.sn"
                            v-model="device.switchOn"
                            color="info"
                            :disabled="device.status!==1"
                            @change="handleSwitchChange(index)"></v-switch>
                      </span>
                    </template>
                    <span>{{
                        device.status !== 1 ? '设备离线' : (device.switchOn ? '断开设备' : '使用该设备透传')
                      }}</span>
                  </v-tooltip>
                </div>
                <v-row class="justify-end align-center" style="margin-top: 3px">
                  <!-- 占位 -->
                  <v-col cols="4"></v-col>

                  <v-col class="is-active" cols="4" v-if="device.status === 0">
                    <v-icon class="mdi-spin" left small dense>mdi-dots-circle</v-icon>
                    连接中
                  </v-col>
                  <v-col class="is-active" cols="4" v-if="device.status === 1">
                    <v-icon color="green" left small dense>mdi-checkbox-blank-circle</v-icon>
                    在线
                  </v-col>
                  <v-col class="is-active" cols="4" v-if="device.status === 2">
                    <v-icon color="gray" left small dense>mdi-checkbox-blank-circle</v-icon>
                    离线
                  </v-col>

                  <!-- 预留功能给展示设备信息 -->
                  <!--                  <v-col class="edit" cols="4" @click="edit(index)">-->
                  <!--                    <v-btn icon small color="primary">-->
                  <!--                      <v-icon>mdi-pencil</v-icon>-->
                  <!--                      编辑-->
                  <!--                    </v-btn>-->
                  <!--                  </v-col>-->

                  <!-- delete button -->
                  <v-col class="delete" cols="4">
                    <v-btn icon small color="red" @click="clickDelete(device.sn)">
                      <v-icon>mdi-delete</v-icon>
                      删除
                    </v-btn>
                  </v-col>
                </v-row>
              </v-col>
            </v-row>
            <!-- item-bottom -->
            <v-row class="item-bottom">
              <div style="width: 100%">备注 : {{ device.note }}</div>
            </v-row>
          </v-col>
        </v-row>
      </v-container>
    </div>
    <div class="bottom-box">
      <v-container fluid>
        <v-row align="center" justify="center" >
          <v-btn @click="refresh" class="refresh-btn"
                 style="background-color: #003366; color: white; margin-right: 10px;position: absolute;right:148px;top:92.5px">刷新
          </v-btn>
        </v-row>
      </v-container>
    </div>
    <v-dialog
        v-model="dialog"
        persistent
        width="400"
        content-class="text-center">
      <v-card>
        <v-card-title class="headline text-h5">
          确认删除该设备吗？
        </v-card-title>
        <v-card-actions>
          <v-container>
            <v-row>
              <v-col cols="12">
                <div>请输入“我已知晓并确认解绑该设备”
                  <v-tooltip bottom>
                    <template v-slot:activator="{ on }">
                      <v-icon
                          color="red"
                          v-on="on"
                          @click="confirmText = '我已知晓并确认解绑该设备'"
                      >mdi-arrow-down
                      </v-icon>
                    </template>
                    <span>自动填充</span>  <!-- 提示文字 -->
                  </v-tooltip>
                </div>
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="12">
                <v-text-field v-model="confirmText"></v-text-field>
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="12">
                <v-btn
                    color="blue"
                    text
                    @click="dialog = false; confirmText = ''">
                  取消
                </v-btn>
                <v-btn
                    color="error"
                    text
                    @click="sure">
                  确认
                </v-btn>
              </v-col>
            </v-row>
          </v-container>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <!--    <v-dialog-->
    <!--        v-model="setSerialPortDialog"-->
    <!--        persistent-->
    <!--        content-class="text-center"-->
    <!--        max-width="800"-->
    <!--        class="settings-dialog">-->
    <!--      <v-card>-->
    <!--        <v-card-title class="headline text-h5 settings-title">-->
    <!--          <div class="title-content">-->
    <!--            串口映射-->
    <!--          </div>-->
    <!--        </v-card-title>-->
    <!--        <v-card-actions class="settings-content">-->
    <!--          <v-container>-->
    <!--            <v-row justify="center" align="center">-->
    <!--              <v-col cols="12">-->
    <!--                <PortSet ref="settingTable"-->
    <!--                         @save="handleData"-->
    <!--                         @addRowErr="setSnackBarFalse"-->
    <!--                         :port-info="portInfo"></PortSet>-->
    <!--              </v-col>-->
    <!--            </v-row>-->
    <!--            <v-row>-->
    <!--              <v-col cols="12">-->
    <!--                <v-btn @click="cancelEdit" class="refresh-btn"-->
    <!--                       style="background-color: #003366; color: white; margin-right: 10px;">-->
    <!--                  取消-->
    <!--                </v-btn>-->
    <!--                <v-btn class="save-btn" @click="save" style="background-color: #FFA500; color: white;">保存</v-btn>-->
    <!--              </v-col>-->
    <!--            </v-row>-->
    <!--          </v-container>-->
    <!--        </v-card-actions>-->
    <!--      </v-card>-->
    <!--    </v-dialog>-->
  </div>
</template>

<style scoped>
.main::-webkit-scrollbar {
  display: none;
}

.main {
  //margin-right: 10vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
}

.top {
  width: 100%;
  min-width: 510px;
  height: 80px;
  min-height: 80px;
  max-height: 80px;
  padding: 0 10vw 0 10vw;
  display: block;
}

.rounded-input {
  width: calc(100% - 18px);
  border-radius: 20px; /* 圆角大小 */
  padding: 8px 16px; /* 内边距 */
  border: 1px solid #ccc; /* 边框 */
  margin-top: 20px;
}

.rounded-input:focus {
  outline: none; /* 移除聚焦时的轮廓 */
  border-color: #1976d2; /* 聚焦时边框颜色，您可以根据需要调整 */
  /* 您可以添加其他聚焦时的样式 */
}

.v-select > .v-input__control > .v-input__slot {
  background-color: rgba(0, 0, 0, 0.2); /* 黑色半透明背景 */
  border-radius: 25px; /* 圆角矩形 */
  border: 1px solid gray;
}

.select-btn {
  margin-right: 10px;
}

.device-list {
  width: 100%;
  max-height: calc(100vh - 316px - 5vh);
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 0 10vw 5vh 10vw;
  margin-bottom: 50px;
}

.item {
  min-width: 450px;
  border: 1px solid black; /* 黑色边框 */
  border-radius: 10px; /* 圆角 */
  padding: 20px;
  margin-bottom: 10px;
}

.item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid grey; /* 灰色分隔线 */
}

.item-bottom {
  padding-top: 5px;
  word-wrap: break-word; /* 旧的浏览器写法 */
  overflow-wrap: break-word; /* 现代浏览器写法 */
  white-space: normal; /* 确保文本会换行 */
}

.dev-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 0 0 5px;
}

.dev-right {
  text-align: center;
  max-width: 250px;
}

.is-active, .edit, .delete {
  padding-left: 0;
  padding-right: 0;
}

.dev-name {
  font-size: 1.5em; /* 更大的字体 */
}

.dev-ip {
  font-size: 1em; /* 相比dev-name字体稍小 */
}

.is-active {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.bottom-box {
  display: flex;
  justify-content: center;
  padding: 20px;
  width: 100%;
  border-top: 2px solid #ededed;
}

.settings-dialog {
  min-width: 700px;
  max-width: 800px;
}

.settings-title {
  border-bottom: 1px solid #ccc;
}

.settings-title > .title-content {
  width: 100%;
  text-align: center;
  //letter-spacing: 1vw;
}

.settings-content {
  justify-content: space-between;
}

.v-menu__content::-webkit-scrollbar {
  display: none;
}

.box {
  position: absolute; /* 设置绝对定位 */
  top: 0; /* 距离顶部0 */
  right: 10px; /* 距离右边10 */
  /* 你可以根据需要添加更多的样式，比如背景色、边距等 */
}
.buttonWz{
  
}
</style>
